<template>
	<view style="background-color: #F5F5F5;">
		<view class="uni-about">
			<!-- 上报方式选择框 -->
			<view class="types_item">
				<view class="item_label">上报方式：</view>
				<picker class="picker_select" @change="getSrcType" :value="eventSrcTypeIndex" :range="statuses"
					range-key="name">
					<view class="uni-input" v-model="eventWayName">{{eventWayName}}</view>
					<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
				</picker>
			</view>
			<!-- 搜索框 -->
			<view class="uni-banner">
				<input type="text" v-model="levelTwoName" placeholder="  请输入案件小类名称查询(选填)" class="search-text"
					maxlength="10" />
				<view class="uni-header-icon" @click="handlerSearchTypeLeves">
					<image src="../../static/icon_b1ogyrvee2o/sousuo.png" mode=""></image>
				</view>
				<uni-popup ref="levelTwoNamePopup" type="center">
					<view class="list list-a">
						<view class="list-group">
							<view class="list-item" v-for="(item, index) in levelTwoNameList"
								@click="selectLevelTwoName(item)">
								{{ item.lv2name }}
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
			<!-- 中间的选择框 -->
			<view class="uni-center">
				<view class="event_types">
					<!-- 案件类别 -->
					<view class="types_item">
						<view class="item_label">案件类别：</view>
						<picker class="picker_select" @change="getCategory" :value="eventType1Index"
							:range="caseTypeData" range-key="name">
							<view class="uni-input" v-model="eventTypeName">{{eventTypeName}}</view>
							<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
						</picker>
					</view>
					<!-- 案件大类 -->
					<view class="types_item">
						<view class="item_label">案件大类：</view>
						<picker class="picker_select" @change="getSubclass" :value="eventTypeLv11Index"
							:range="categoryNameData" range-key="name">
							<view class="uni-input" v-model="eventTypeLv1Name">{{eventTypeLv1Name}}</view>
							<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
						</picker>
					</view>
					<!--案件小类  -->
					<view class="types_item">
						<view class="item_label">案件小类：</view>
						<picker class="picker_select" @change="geteventTypeLv3" :value="eventTypeLv21Index"
							:range="subclassNameData" range-key="name">
							<view class="uni-input" v-model="eventTypeLv2Name">{{eventTypeLv2Name}}</view>
							<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
						</picker>
					</view>
					<!-- 立案条件 -->
					<view class="types_item">
						<view class="item_label">立案条件：</view>
						<uni-data-picker class="picker_select" v-model="classes" :localdata="eventTypeLv3Data"
							@change="changeTypeLv3">
							<view class="uni-input">{{eventTypeLv3Name}}</view>
							<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
						</uni-data-picker>
					</view>

				</view>
			</view>

			<!-- 案件标准 -->
			<view class="uni-banner">
				<view class="uni-banner-con" style="color: #A40000; font-weight: 700;">案件标准:</view>
				<view class="uni-banner-par">
					<view class="search-images" @click="gotoSearchImg">查看标准图片</view>
				</view>
			</view>

			<!-- 案件位置 -->
			<view class="uni-banner">
				<view class="uni-banner-con">案件位置:</view>
				<view class="form-item-body">
					<input type="text" v-model="eventAddress" placeholder="请输入或点击定位图标获取位置信息" class="search-antext"/>
					<view class="uni-header-icon" @click="getCurretAddress">
						<image src="../../static/icon_b1ogyrvee2o/dingwei.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 案件描述 -->
			<view class="uni-banner" style="height: 200rpx;">
				<view class="uni-banner-con">案件描述:</view>
				<!-- 描述框 -->
				<view class="uni-banner-Description">
					<textarea v-model="eventDescribe" class="JTxtArea" :maxlength="250" @input="inputReason" auto-height
						placeholder="   请输入案件描述" /></textarea>
				</view>
			</view>
			<P style="color: #A40000; font-size: 20rpx; ">*描述字数限制250字，字数{{remnant}}/250</P>

			<!-- 是否开放景区 -->
			<view class="uni-center">
				<view class="event_types">
					<view class="types_item">
						<view class="item_label2">是否开放景区：</view>
						<picker class="picker_select" @change="getOpenScenic" :value="isOpenScenicIndex" :range="sceniclist"
							range-key="name">
							<view class="uni-input" v-model="eventscenicName">{{eventscenicName}}</view>
							<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
						</picker>
					</view>
				</view>
			</view>

			<!-- 相机 拍照得到图片   处理前照片-->
			<view class="uni-Camera">
				<text>处理前照片:</text>
				<view class="uni-Camera-zero" id="upImageFile" @click="takePictures(1)">
					<view class="uni-zero-kacha">
						<image src="../../static/icon_b1ogyrvee2o/xiangji.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="uni-form-item uni-column" v-if="beforeimagesArr && beforeimagesArr.length > 0">
				<view class="item-value-camera">
					<view v-model="searchForm.params.beforeImg" class="image-box" v-for="(item, index) in beforeimagesArr"
						:key="index">
						<image class="selectImg" :src="item" mode="aspectFit" alt="" @click="showbeforeImage(item)">
							<i class="closeImg" @click="deletebeforeImg(index)"></i>
					</view>
				</view>
			</view>
			<P style="color: #A40000; font-size: 20rpx;margin-top: 20rpx; ">*请在拍照时，确保事件的环境位置关系与拍摄全景，如一张照片无法表现时，可拍摄多张！
			</P>

			<!-- 相机 拍照得到图片   处理后照片-->
			<view class="uni-Camera" style="margin-top: 30px;" v-if="searchForm.eventSrcType == 8">
				<text>处理后照片:</text>
				<view class="uni-Camera-zero" id="upImageFile" @click="takePictures(2)">
					<view class="uni-zero-kacha">
						<image src="../../static/icon_b1ogyrvee2o/xiangji.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="uni-form-item uni-column" v-if="afterimagesArr && afterimagesArr.length > 0">
				<view class="item-value-camera">
					<view v-model="searchForm.params.afterImg" class="image-box" v-for="(item, index) in afterimagesArr"
						:key="index">
						<image class="selectImg" :src="item" mode="aspectFit" alt="" @click="showafterImage(item)">
							<i class="closeImg" @click="deleteafterImg(index)"></i>
					</view>
				</view>
			</view>
			<P style="color: #A40000; font-size: 20rpx;margin-top: 20rpx; " v-if="searchForm.eventSrcType == 8">*请在拍照时，确保事件的环境位置关系与拍摄全景，如一张照片无法表现时，可拍摄多张！
			</P>

			<!-- 案件上报 -->
			<view class="uni-report" @click="getReport">
				案件上报
			</view>
		</view>

		<!-- 上报完成后弹出框 -->
		<uni-popup ref="popupReport" type="center" :mask-click="false" background-color="#ffffff">
			<view class="popup-box">
				<image @click="closeToggleMap" class="close_map" src="../../static/city-manage/close_map.png">
				</image>
				<view class="popup-top">
					确认上报案件信息
				</view>

				<!-- 上报方式 -->
				<view class="popup-banner">
					<view class="popup-banner-con">
						上报方式:
					</view>
					<view class="popup-banner-nite">
						{{eventWayName}}
					</view>
				</view>

				<!-- 案件类别 -->
				<view class="popup-banner">
					<view class="popup-banner-con">
						案件类别:
					</view>
					<view class="popup-banner-nite">
						{{eventTypeName}}
					</view>
				</view>

				<!-- 大类名称 -->
				<view class="popup-banner">
					<view class="popup-banner-con">
						大类名称:
					</view>
					<view class="popup-banner-nite">
						{{eventTypeLv1Name}}
					</view>
				</view>

				<!-- 小类名称 -->
				<view class="popup-banner">
					<view class="popup-banner-con">
						小类名称:
					</view>
					<view class="popup-banner-nite">
						{{eventTypeLv2Name}}
					</view>
				</view>

				<!-- 立案条件 -->
				<view class="popup-banner1">
					<view class="popup-banner-con">
						立案条件:
					</view>
					<view class="popup-banner-nite1">
						{{eventTypeLv3Name}}
					</view>
				</view>

				<!-- 案件位置 -->
				<view class="popup-banner1">
					<view class="popup-banner-con">
						案件位置:
					</view>
					<view class="popup-banner-nite1">
						{{eventGaodeName}}
					</view>
				</view>

				<!-- 案卷描述 -->
				<view class="popup-banner1">
					<view class="popup-banner-con">
						案卷描述:
					</view>
					<view class="popup-banner-nite12">
						{{eventDescribe}}
					</view>
				</view>

				<!-- 是否开放景区 -->
				<view class="popup-banner">
					<view class="popup-banner-con">
						是否开放景区:
					</view>
					<view class="popup-banner-nite">
						{{eventscenicName}}
					</view>
				</view>

				<!-- 调取相机的图片 -->
				<!-- <view class="popup-banner-img">
					<view class="uni-form-item uni-column" v-if="imagesArr && imagesArr.length > 0">
						<view class="item-value-camera">
							<view v-model="searchForm.params.beforeImg" class="image-box"
								v-for="(item, index) in imagesArr" :key="index">
								<image class="selectImg" :src="item" mode="aspectFit" alt=""
									@click="showImage(item)">
							</view>
						</view>
					</view>
				</view> -->

				<!-- 确认上报 -->
				<view class="uni-report-con" @click="PostReportOn">
					确认上报
				</view>

			</view>
		</uni-popup>

		<!-- 查看标准图片弹出框 -->
		<uni-popup ref="popupSearch" type="center">
			<view class="popup-imgbox">
				<view class="SearchImages" v-model="searchPhotos" v-for="(item, index) in photosArr" :key="index">
					<image :src="item" mode="aspectFit" alt="" @click="searchImage"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getArchivesTypeLeveTwoById,getcaseType,getcategoryName,getsubclassName,eventTypelv3,getArchivesTypeLeveTwoByName} from '@/api/configure.js';
	import {getLocation, reverseGeocode} from '@/util/util.js';
	import {getBigOption} from '@/api/my_task.js'; //确认提交
	import {pathToBase64} from '@/js_sdk/mmmm-image-tools/index.js'
	import URL from '@/util/url.js'
	export default {
		data() {
			return {
				image_url: URL.CASEIMAGE_URL,
				// image_url: 'http://www.findoma.com/findoma-file',
				// image_url: 'http://www.qjjxh.com:8081/file',
				//案件描述字数
				remnant: 0,
				//用户登录信息
				userInfo: uni.getStorageSync('userInfo'),
				eventItem: {
					eventTypeName: ''
				},
				eventGaodeName: '',
				eventWayName: '',
				photosArr: [], //查看标准图片
				searchPhotos: [],
				beforeimagesArr: [], //处理前图片
				afterimagesArr: [], //处理后图片
				beforeImgInfo: [], //提交处理前图片
				afterImgInfo: [],//提交处理后图片
				//定位
				gdx: '',
				gdy: '',
				eventAddress: '', //位置
				eventSrcType: '', //上报方式
				statuses: [{
						name: "发现上报",
						value: 0
					},
					{
						name: "自行处理",
						value: 8
					},
				], //上报方式
				eventSrcTypeIndex: '', //上报方式
				eventWayName: '请选择上报方式',
				eventType1: '', //案件类别字段名
				eventType1Index: '', //value值
				eventTypeName: '请选择', //初始
				eventTypeLv11: '', //大类字段名
				eventTypeLv11Index: '',
				eventTypeLv1Name: '请先选择案件类别',
				eventTypeLv21: '', //小类字段名
				eventTypeLv21Index: '',
				eventTypeLv2Name: '请先选择案件大类',
				eventTypeLv31: '', //立案条件字段名
				eventTypeLv31Index: '',
				eventTypeLv3Name: '请先选择案件小类',
				isOpenScenic: '', //开放景区
				sceniclist: [{
						name: "否",
						value: 0
					},
					{
						name: "是",
						value: 1
					},
				], //是否开放景区
				isOpenScenicIndex: '',
				eventscenicName: '选择是否开放景区',
				eventDescribe: '', //案件描述
				searchForm: {
					eventReportName: '', //上报人姓名
					createUser: '', //创建人id
					eventSrcType: '', //上报方式
					eventType: '', //案件类别
					eventTypeLv1: '', //大类
					eventTypeLv2: '', //小类
					eventTypeLv3: '', //立案条件
					eventDescribe: '', //案件描述
					isOpenScenic: '', //是否开放景区
					//地图定位
					eventAddress: '', //地理位置
					gdx: '',
					gdy: '',
					//上传图片路径
					params: {
						beforeImg: [], //处理之前的图片
						afterImg: [], //处理之后的图片
					},
				},
				caseTypeData: [], //案件类别数据
				categoryNameData: [], //大类数据
				subclassNameData: [], //小类数据
				eventTypeLv3Data: [], //立案条件数据
				subClassDisabled: false,
				classes: '',
				levelTwoName: '',
				levelTwoNameList: [],
				openLevelTwoName: false,
				longitude: '',
				latitude: ''
			}
		},
		async onLoad(option) {
			this.gdx = option.lng || '';
			this.gdy = option.lat || '';

			this.eventAddress = '';

			if(this.gdx){
				let {address} = await reverseGeocode(this.gdx, this.gdy);

				this.eventAddress = address;

				uni.setStorageSync('currentLocation', {
					currentx: option.lng,
					currenty: option.lat,
					currentAddress: address
				});
			}

			//获取案件类别
			this.getType();
			this.init();
		},
		onShow() {
			//从地图获取到定位地址并返回

			let currentLocation = uni.getStorageSync('currentLocation');

			this.eventAddress = currentLocation.currentAddress || '';



			this.gdx = currentLocation.currentx || '';
			this.gdy = currentLocation.currenty || '';
		},
		methods: {
			init() {
				this.isOpenScenicIndex = 0; //是否开放景区默认值
				// 选择是否开放景区
				this.eventscenicName = this.sceniclist[this.isOpenScenicIndex].name;
				this.isOpenScenic = this.sceniclist[this.isOpenScenicIndex].value;
				this.searchForm.isOpenScenic = this.isOpenScenic;


				this.eventSrcTypeIndex = 0;//默认上报方式
				// 选择上报方式
				this.eventWayName = this.statuses[this.eventSrcTypeIndex].name;
				this.eventSrcType = this.statuses[this.eventSrcTypeIndex].value;
				this.searchForm.eventSrcType = this.eventSrcType;
			},
			//案件描述滚动条
			inputReason() {
				this.remnant = this.eventDescribe.length;
			},
			//获取上报方式
			getSrcType(e) {
				this.eventSrcTypeIndex = e.target.value;
				this.statuses.forEach((ele, index) => {
					if (this.eventSrcTypeIndex == index) {
						this.eventWayName = ele.name;
						this.eventSrcType = ele.value;
					}
				});
				//提交
				this.searchForm.eventSrcType = this.eventSrcType;
			},

			//获取是否开放景区
			getOpenScenic(e) {
				this.isOpenScenicIndex = e.target.value;
				this.sceniclist.forEach((ele, index) => {
					if (this.isOpenScenicIndex == index) {
						this.eventscenicName = ele.name;
						this.isOpenScenic = ele.value;
					}
				});
				// 提交
				this.searchForm.isOpenScenic = this.isOpenScenic;
			},
			/**
			 * Description:获取案件类别
			 */
			getType() {
				uni.showLoading();
				//获取案件类型
				getcaseType().then((res) => {
					this.caseTypeData = res.data;
					uni.hideLoading();
				}).catch((error) => {});
			},
			//选择框上面改变下面的清空
			clearTypes(types) {
				types.forEach(item => {
					if (item == '1') {
						this.eventTypeLv11 = '';
						this.eventTypeLv11Index = '';
						this.eventTypeLv1Name = '请先选择案件类别';
						this.categoryNameData = [];
					} else if (item == '2') {
						this.eventTypeLv21 = '';
						this.eventTypeLv21Index = '';
						this.eventTypeLv2Name = '请先选择案件大类';
						this.subclassNameData = [];
					} else if (item == '3') {
						this.eventTypeLv31 = '';
						this.eventTypeLv31Index = '';
						this.eventTypeLv3Name = '请先选择案件小类';
						this.eventTypeLv3Data = []
					}
				})
			},
			/**
			 * Description:获取大类
			 */
			getCategory(e) {
				this.clearTypes(['1', '2', '3']);
				this.eventType1Index = e.target.value;
				this.caseTypeData.forEach((ele, index) => {
					if (this.eventType1Index == index) {
						this.eventTypeName = ele.name;
						this.eventType1 = ele.code;
					}
				})
				if (this.eventType1 === '') {
					this.eventTypeLv11 = '';
					this.eventTypeLv21 = '';
					this.eventTypeLv31 = '';
					return;
				}

				this.eventTypeLv11 = '';
				this.categoryNameData = [];
				//获取案件大类名称
				this.searchForm.eventType = this.eventType1;

				getcategoryName({
					type: this.eventType1,
				}).then(
					(res) => {
						this.categoryNameData = res.data;
					}
				).catch((error) => {});
			},
			/**
			 * Description:获取小类
			 */
			getSubclass(e) {
				this.clearTypes(['2', '3']);

				this.eventTypeLv11Index = e.target.value;
				this.categoryNameData.forEach((ele, index) => {
					if (this.eventTypeLv11Index == index) {
						this.eventTypeLv1Name = ele.name;
						this.eventTypeLv11 = ele.id;
					}
				})
				if (this.eventTypeLv11 === '') {
					this.eventTypeLv21 = '';
					this.eventTypeLv31 = '';
					return;
				}
				this.eventTypeLv21 = '';
				this.subclassNameData = [];
				this.searchForm.eventTypeLv1 = this.eventTypeLv11;

				getsubclassName({
					parentId: this.eventTypeLv11
				}).then(
					(res) => {
						this.subclassNameData = res.data;
					}
				).catch((error) => {});
			},
			/**
			 * Description:获取立案条件
			 */
			geteventTypeLv3(e) {
				this.clearTypes(['3']);

				this.eventTypeLv21Index = e.target.value;
				this.subclassNameData.forEach((ele, index) => {
					if (this.eventTypeLv21Index == index) {
						this.eventTypeLv2Name = ele.name;
						this.eventTypeLv21 = ele.id;
					}
				})
				if (this.eventTypeLv21 === '') {
					this.eventTypeLv31 = '';
					return;
				}
				this.eventTypeLv31 = '';
				this.eventTypeLv3Data = [];
				this.searchForm.eventTypeLv2 = this.eventTypeLv21;
				eventTypelv3({
					parentId: this.eventTypeLv21
				}).then(
					(res) => {
						this.eventTypeLv3Data = res.data.map(item => {
							item.text = item.name;
							item.value = item.id;

							return item;
						})
					}
				).catch((error) => {});

			},
			//改变立案条件
			changeTypeLv3(e) {
				this.eventTypeLv31Index = e.detail.value[0].value;

				this.eventTypeLv3Data.forEach((ele, index) => {
					if (this.eventTypeLv31Index == ele.id) {
						this.eventTypeLv3Name = ele.name;
						this.eventTypeLv31 = ele.id;
					}
				});
				//提交立案条件
				this.searchForm.eventTypeLv3 = this.eventTypeLv31;
			},
			//标准图片
			gotoSearchImg() {
				let _this = this;
				_this.photosArr = [];
				this.eventTypeLv3Data.forEach((ele, index) => {
					if (this.eventTypeLv31 == ele.id) {
						ele.images.forEach(item => {
							_this.photosArr.push(_this.image_url + item.url);
						})
					}

				});
				//打开弹出框
				if( this.photosArr.length > 0 ) {
					this.$refs.popupSearch.open();
				} else {
					this.$tip.toast('暂无标准图片');
				}
			},
			//查看图片
			searchImage() {
				let _this = this;
				uni.previewImage({
					urls: _this.photosArr,
					current: _this.photosArr[0],
					longPressActions: {
						success: function(data) {
						}
					}
				});
			},
			//调手机相册或相机
			takePictures(e) {
				let _this = this;
				// 选择图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'],
					success: function(res) {
						uni.showLoading({
						    title: '正在上传图片',
							mask: true
						});
						if(e == 1) {
							//本地回显图片(处理前)
							res.tempFilePaths.forEach(item => {
								_this.beforeimagesArr.push(item);
							});
						}else if(e == 2) {
							//本地回显图片(处理后)
							res.tempFilePaths.forEach(item => {
								_this.afterimagesArr.push(item);
							});
						}

						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							header:{
								'Authorization': 'Bearer ' + uni.getStorageSync('token'),
							},
							url: URL.Upload1,
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: function(uploadFileRes) {
								if(e == 1) {
									let res = JSON.parse(uploadFileRes.data);
									if (res.code === 200) {
										_this.beforeImgInfo.push({
											"image": URL.IMAGEURL + res.fileName,
										});

										uni.hideLoading();
									}else {
										this.$tip.toast('请重新拍照');
									}
								}else if(e == 2){
									let res = JSON.parse(uploadFileRes.data);
									console.log(res,"afterImgInfo")
									if (res.code === 200) {
										_this.afterImgInfo.push({
											"image": URL.IMAGEURL + res.fileName,
										});

										uni.hideLoading();
									}else {
										this.$tip.toast('请重新拍照');
									}
								}

							},
						})

					},
				});
			},

			//点击图片放大
			showbeforeImage(item) {
				let _this = this;
				uni.previewImage({
					urls: _this.beforeimagesArr,
					current: item,
					longPressActions: {
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			//点击图片放大
			showafterImage(item) {
				let _this = this;
				uni.previewImage({
					urls: _this.afterimagesArr,
					current: item,
					longPressActions: {
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			// 删除本地图片：未上传
			deletebeforeImg(index) {
				this.beforeImgInfo.splice(index, 1)
				this.beforeimagesArr.splice(index, 1);
			},
			// 删除本地图片：未上传
			deleteafterImg(index) {
				this.afterImgInfo.splice(index, 1)
				this.afterimagesArr.splice(index, 1);
			},

			//定位
			getCurretAddress() {
				uni.navigateTo({
					url: "/pages/tabBar/caseMap"
				});
			},

			//案件上报弹出框获取的数据
			getReport() {
				let that = this;
				uni.showLoading();
				//判断
				if (this.eventSrcType === '') {
					this.$tip.toast('请选择上报方式');
					return;
				}
				if (this.eventType1 === '') {
					this.$tip.toast('请选择类别');
					return;
				}
				if (this.eventTypeLv11 === '') {
					this.$tip.toast('请选择大类');
					return;
				}
				if (this.eventTypeLv21 === '') {
					this.$tip.toast('请选择小类');
					return;
				}
				if (this.eventTypeLv31 === '') {
					this.$tip.toast('请选择条件');
					return;
				}
				if (this.eventAddress === '' || this.gdx === '' || this.gdy === '') {
					this.$tip.toast('请选择定位信息');
					return;
				}
				if (this.eventDescribe === '') {
					this.$tip.toast('请填写描述');
					return;
				}
				if (this.isOpenScenic === '') {
					this.$tip.toast('请选择是否开放景区');
					return;
				}
				if (this.beforeImgInfo.length === 0) {
					this.$tip.toast('请选择照片或拍照');
					return;
				}

				//打开弹出框
				that.$refs.popupReport.open();
				//提交位置
				that.searchForm.gdx = that.gdx;
				that.searchForm.gdy = that.gdy;

				that.searchForm.eventAddress = that.eventAddress;
				that.eventGaodeName = that.eventAddress;
				//提交案件描述
				that.searchForm.eventDescribe = that.eventDescribe
				that.eventDescribeName = that.searchForm.eventDescribe;

				//提交是否开放景区
				that.sceniclist.forEach((ele, index) => {
					if (that.isOpenScenicIndex == index) {
						that.eventscenicName = ele.name;
						that.isOpenScenic = ele.code;
						that.eventscenicName = ele.name;
					}
				});

				//提交上报方式
				that.statuses.forEach((ele, index) => {
					if (that.eventSrcTypeIndex == index) {
						that.eventWayName = ele.name;
						that.eventSrcType = ele.code;
						that.eventWayName = ele.name;
					}
				});

				//提交案件类别
				that.caseTypeData.forEach((ele) => {
					if (ele.code == that.eventType1) {
						that.eventItem.eventTypeName = ele.name;
					}
				});

				//提交案件大类
				that.categoryNameData.forEach((ele) => {
					if (ele.id == that.eventTypeLv11) {
						that.eventItem.eventTypeLv1Name = ele.name;
					}
				});


				//提交案件小类
				that.subclassNameData.forEach((ele) => {
					if (ele.id == that.eventTypeLv21) {
						that.eventItem.eventTypeLv2Name = ele.name;
					}
				});


				//提交案件条件
				that.eventTypeLv3Data.forEach((ele) => {
					if (ele.id == that.eventTypeLv31) {
						that.eventItem.eventTypeLv3Name = ele.name;
					}
				});


				//查看标准图片
				var json = JSON.stringify(that.searchPhotos)
				that.searchPhotos = json;

				//提交userid
				that.searchForm.createUser = that.userInfo.userId;
				//提交姓名
				that.searchForm.eventReportName = that.userInfo.nickName;

				uni.hideLoading();

			},
			//关闭弹出框
			closeToggleMap() {
				uni.removeStorageSync('storage_key');
				//案件上报弹出框
				this.$refs.popupReport.close();
			},

			//确认上报 上报至接口(getBigOption)
			PostReportOn() {
				//提交处理前图片
				var json = JSON.stringify(this.beforeImgInfo)
				this.searchForm.params.beforeImg = json;
				//提交处理后图片
				var json = JSON.stringify(this.afterImgInfo)
				this.searchForm.params.afterImg = json;

				uni.showLoading({
					title:'正在上报',
					mask: true
				});
				let searchFormData = this.searchForm

				getBigOption(searchFormData).then((res) => {
					uni.hideLoading();
					this.$refs.popupReport.close();

					if (res.code === 200) {
						uni.hideLoading();
						this.$tip.toast('上报成功', () => {
							setTimeout(() => {
								uni.navigateBack({
								    delta: 1,
								});
							}, 1000);
						})

					} else {
						this.$tip.toast(res, msg);
					}
				}).catch(() => {
					uni.showToast({
						title: error.msg||error.errMsg,
						icon:'none',
						duration: 2000
					});
				});

			},

			//搜索
			async handlerSearchTypeLeves() {
				if (!this.levelTwoName) {
					return;
				}

				let data = {
					levelTwoName: this.levelTwoName
				}

				getArchivesTypeLeveTwoByName(data).then(res => {
					if (res.data && res.data.length > 0) {
						this.levelTwoNameList = res.data.slice(0);
						this.$refs.levelTwoNamePopup.open('bottom')
					}
				})
			},
			async getEventTypelv3(parentId) {
				let {
					data
				} = await eventTypelv3({
					parentId: parentId
				})

				if (data && data.length > 0) {
					this.eventTypeLv3Data = data.map(item => {
						item.text = item.name;
						item.value = item.id;

						return item;
					})
				}
			},
			async getLeveOneTypes(type) {
				let {
					data
				} = await getcategoryName({
					type: type
				})

				if (data && data.length > 0) {
					this.categoryNameData = data.slice(0);
				}
			},
			async selectLevelTwoName(item) {
				this.clearTypes(['3'])

				let parentid = item.parentid;
				let lv2id = item.lv2id;
				let typeId = item.type;

				let param = {
					parentId: parentid
				};

				let {data} = await getsubclassName(param);

				if (data && data.length > 0) {
					this.subclassNameData = data.slice(0);
					this.subclassNameData.forEach((item, index) => {
						if (lv2id == item.id) {
							this.eventTypeLv21Index = index;
							this.eventTypeLv2Name = item.name;
							this.eventTypeLv21 = item.id;
						}
					})

					this.caseTypeData.forEach((item, index) => {
						if (typeId == item.code) {
							this.eventType1Index = index;
							this.eventTypeName = item.name;
							this.eventType1 = item.code;
						}
					})

					await this.getLeveOneTypes(typeId);

					this.categoryNameData.forEach((item, index) => {
						if (parentid == item.id) {
							this.eventTypeLv11Index = index;
							this.eventTypeLv1Name = item.name;
							this.eventTypeLv11 = item.id;
						}
					})

					await this.getEventTypelv3(this.eventTypeLv21);
				}

				this.searchForm.eventType = this.eventType1;
				this.searchForm.eventTypeLv1 = this.eventTypeLv11;
				this.searchForm.eventTypeLv2 = this.eventTypeLv21;

				this.$refs.levelTwoNamePopup.close();
			},
			// 返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			onBackPress(options) {
				if (options.from === 'navigateBack') {
					return false;
				}

				if(this.$refs.popupSearch.showPopup){
					this.$refs.popupSearch.close();
				} else {
					this.back();
				}
				return true;
			}
		}

	}
</script>

<style lang="scss">
	.uni-header {
		width: 100%;
		height: 20rpx;
		background: #c4534c;
	}

	.JTxtArea {
		width: 100%;

	}

	.uni-about {
		// width: 660rpx;
		// margin: 32rpx auto 0;
		padding: 20px 30px 70px 30px;
		background-color: #F5F5F5;
		.types_item {
			display: flex;
			margin-bottom: 20rpx;

			.item_label {
				width: 140rpx;
			}

			select {
				width: calc(100% - 140rpx);
			}

			.select_box {
				width: calc(100% - 140rpx);
				position: relative;

				.select_input {
					border: 1px solid #ccc;
					height: 60rpx;
					border-radius: 8rpx;
					padding: 0 10px;
					line-height: 60rpx;
				}

				.select_options_box {
					//display: none;
					border: 1px solid #7f7a7a;
					box-shadow: #7f7a7a 0px 0px 10px;
					position: absolute;
					top: 30px;
					width: 100%;
					background: rgb(255, 255, 255);

					.select_options {
						padding: 6rpx 10rpx;

						&:last-child {
							border-bottom: 0;
						}
					}
				}
			}

			.picker_select {
				width: calc(100% - 140rpx);
				height: 60rpx;
				border: 1px solid #ced4da;
				box-sizing: border-box;
				border-radius: 6rpx;
				position: relative;
				overflow: hidden;

				.uni-input {
					line-height: 50rpx;
					border-radius: 6rpx;
					color: #585656;
					padding: 1px 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.drop-down {
					width: 28rpx;
					height: 20rpx;
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto;
					right: 10rpx;
				}
			}
		}

		.uni-banner {
			width: 100%;
			height: 60rpx;
			// border: 1px solid black;
			margin-top: 20rpx;
			position: relative;

			.uni-banner-con {
				width: 130rpx;
				height: 60rpx;
				// background-color: #1AAD19;
				float: left;
			}

			.search-text {
				font-size: 14px;
				border: 2rpx solid #E1E1E1;
				width: 100%;
				height: 60rpx;
				white-space: nowrap;
				border-radius: 20rpx;
				margin: 0 auto 0;
				position: absolute;
				background-color: #ffffff;
			}

			.uni-header-icon {
				width: 72rpx;
				height: 56rpx;
				position: absolute;
				top: 4rpx;
				right: -12rpx;

				image {
					width: 70%;
					height: 90%;
				}
			}

			.uni-banner-par {
				width: 300rpx;
				height: 60rpx;
				float: left;
				margin-left: 10rpx;

				.search-images {
					color: #A40000;
					font-weight: 700;
				}
			}

			.search-antext {
				height: 60rpx;
				margin: 0 auto 0;
				padding: 0rpx 50rpx 0rpx 5rpx;
				font-size: 28rpx;
				text-indent: 20rpx;
				background-color: #ffffff;
				border: 2rpx solid #E1E1E1;
				border-radius: 20rpx;
			}

			.uni-banner-Description {
				width: 480rpx;
				height: 200rpx;
				border: 1px solid #E1E1E1;
				word-break: break-all;
				overflow-x: hidden;
				background-color: #ffffff;
				position: absolute;
				top: 0px;
				right: 0px;
			}
		}


		.uni-center {
			margin-top: 20rpx;

			.event_types {
				padding: 0rpx;

				.types_item {
					display: flex;
					margin-bottom: 20rpx;
					text-align: left;

					.item_label {
						width: 140rpx;
					}

					select {
						width: calc(100% - 140rpx);
					}

					.select_box {
						width: calc(100% - 140rpx);
						position: relative;

						.select_input {
							border: 1px solid #ccc;
							height: 60rpx;
							border-radius: 8rpx;
							padding: 0 10px;
							line-height: 60rpx;
						}

						.select_options_box {
							//display: none;
							border: 1px solid #7f7a7a;
							box-shadow: #7f7a7a 0px 0px 10px;
							position: absolute;
							top: 30px;
							width: 100%;
							background: rgb(255, 255, 255);

							.select_options {
								padding: 6rpx 10rpx;

								&:last-child {
									border-bottom: 0;
								}
							}
						}
					}

					.picker_select {
						width: calc(100% - 140rpx);
						height: 60rpx;
						border: 1px solid #ced4da;
						box-sizing: border-box;
						border-radius: 6rpx;
						position: relative;
						overflow: hidden;

						.uni-input {
							line-height: 50rpx;
							border-radius: 6rpx;
							color: #585656;
							padding: 1px 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.drop-down {
							width: 28rpx;
							height: 20rpx;
							position: absolute;
							top: 0;
							bottom: 0;
							margin: auto;
							right: 10rpx;
						}
					}
				}
			}
		}

		.item_label2 {
			width: 224rpx;
		}

		.uni-banner-com {
			width: 180rpx;
			height: 60rpx;
			float: left;
		}

		.example-6 select {
			width: 460rpx;
			height: 60rpx;
			float: left;
			margin-left: 10rpx;
			border-radius: 10rpx;
			border: 1px solid #E1E1E1;
		}

		.uni-Camera {
			width: 100%;
			height: 130rpx;

			.uni-Camera-zero {
				width: 145rpx;
				height: 125rpx;
				border-radius: 50%;
				background-color: #E5E5E5;
				position: relative;
				top: -48rpx;
				left: 260rpx;

				.uni-zero-kacha {
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					top: 16rpx;
					left: 28rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.uni-report {
			width: 520rpx;
			height: 80rpx;
			background-color: #F76260;
			border-radius: 80rpx;
			position: absolute;
			left: 120rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			margin-top: 20rpx;
		}

		.uni-banner1 {
			width: 124rpx;
			height: 60rpx;
			margin-top: 10rpx;
			float: left;
		}

		.item-value-camera {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		//显示上传图片
		.image-box {
			width: 31%;
			height: 90px;
			border: 1px solid #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 2%;
			margin-bottom: 2.5%;
			position: relative;

			&:nth-of-type(3n) {
				margin-right: 0;
			}

			uni-image {
				width: 100%;
				height: 100%;
			}

			.closeImg,
			.closeImg_img,
			.closeImg_image {
				//带_的是微信小程序的样式
				position: absolute;
				top: -6px;
				right: -6px;
				width: 16px;
				height: 16px;
				background: red;
				border-radius: 50%;
				line-height: 13px;
				text-align: center;

				&:before {
					content: '×';
					color: #fff;
				}
			}
		}

		.popup-imgbox {
			width: 750rpx;
			height: 640rpx;

			.SearchImages {
				width: 354rpx;
				height: 300rpx;
				background-color: #FFFFFF;
				float: left;
				margin: 10rpx 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.list {
		&.list-a {
			background-color: #ffffff;
			padding: 20rpx;

			.list-item {
				margin-bottom: 5rpx;
				padding: 5rpx 0rpx;
				text-align: center;
			}
		}
	}



	.popup-box {
		height: 100%;
		text-align: center;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		padding: 0px 0px 60px 0px;

		.close_map {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: -24rpx;
			top: -22rpx;
			background: #fff;
			border: 4rpx solid #ccc;
			border-radius: 50%;
			padding: 10rpx;
			z-index: 999999;
		}

		.popup-top {
			width: 100%;
			// height: 80rpx;
			// line-height: 80rpx;
			font-size: 38rpx;
		}

		.popup-banner {
			width: 600rpx;
			// height: 50rpx;
			margin-left: 20rpx;
			font-weight: bolder;

			.popup-banner-con {
				width: 176rpx;
				// height: 48rpx;
				float: left;
			}

			.popup-banner-nite {
				width: 400rpx;
				float: left;
				margin-left: 20rpx;
				text-align: left;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #A40000;
			}

		}

		.popup-banner1 {
			width: 600rpx;
			height: 70rpx;
			margin-left: 20rpx;
			font-weight: bolder;

			.popup-banner-con {
				width: 176rpx;
				// height: 48rpx;
				float: left;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.popup-banner-nite1 {
				width: 400rpx;
				float: left;
				margin-left: 20rpx;
				text-align: left;
				font-size: 28rpx;
				color: #A40000;
			}

			.popup-banner-nite12 {
				width: 400rpx;
				display: block;
				overflow-x: hidden;
				text-overflow: ellipsis;
				float: left;
				margin-left: 20rpx;
				text-align: left;
				font-size: 28rpx;
				color: #A40000;
			}
		}

		.popup-banner-img {
			width: 600rpx;
			margin-left: 20rpx;
		}

		.uni-report-con {
			width: 520rpx;
			height: 80rpx;
			background-color: #F76260;
			border-radius: 80rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			// margin-left: 70rpx;
			// margin-top: 50rpx;
			position: absolute;
			bottom: 10px;
			left: 26px;
		}
	}
	.form-item-body{
		position: relative;
		top: 0rpx;
		left: 0rpx;
		margin-left: 140rpx;
	}
</style>
